<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>watch监听-实现业务逻辑</title>
    <style>
        .input-group {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .input-label {
            width: 100px;
            text-align: right;
            padding-right: 10px;
        }

        input[type="text"] {
            width: 300px;
            padding: 5px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="input-group">
            <label class="input-label">输入文字:</label>
            <input type="text" v-model="inputText" @input="translateText">
        </div>
        <div class="input-group">
            <label class="input-label">翻译结果:</label>
            <input type="text" v-model="translatedText" readonly>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // Vue 实例 在全局环境，就有了Vue构造函数
        const app = new Vue({
            // 通过el 配置选择器
            el: '#app',
            data: {
                inputText: '',
                translatedText: ''

            },
            methods: {
                translateText(){
                    console.log("=====translateText======");
                }
            },


            watch: {
                async inputText(newValue) {
                    //监听输入的数据发送接口进行翻译（模拟）
                    const res = await axios({
                        url: 'http://localhost:8081/api/random-string'
                       

                    })
                    console.log(res.data);
                    this.translatedText =res.data;
                    // this.translatedText=newValue;
                }

            }



        });
    </script>
</body>

</html>